<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    h1{
      color:rgb(0, 0, 205);
      display: block;
      font-size: 2em;
      margin-block-start: 0.67em;
      margin-block-end: 0.67em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      font-weight: bold;
      unicode-bidi: isolate;
    }
    a {
      color: rgb(0, 0, 205);
      text-decoration: none;
    }
    a:-webkit-any-link {
      cursor: pointer;
    }
    table th, td {
      padding: 0em 0.6em;
      height: 1.8em;
    }
    body{
    font-family:"Bitstream Vera Sans","Lucida Grande", Verdana, Lucida, sans-serif;
    font-size: .9em;
    margin: 0px 160px;
    }
    tr.even {
        background:#EEE;
    }
    th {
        text-align:left;
        font-weight:bold;
        background:#EEE;
        border-bottom:1px solid #aaa;
    }
    a:hover {
        text-decoration: underline;
    }
    table {
        border:1px solid #aaa;
        border-left: 0px;
        border-right: 0px;
        float: left;
        margin-bottom: 20px;
    }
    #mirror-data, #mirror-usage, #mirror-links, #mirror-misc {
        margin-top: 20px;
        padding-bottom: 10px;
    }
    h3 {
        color: rgb(0, 0, 205);
    }
    .hr {
        border-bottom: dashed #777 1px;
        width: 60%;
    }
    .hr hr {
        display: none;
    }
    #footer {
        text-align: center;
        margin-bottom: 10px;
        clear: both;
    }
    #footer a {
        color: #555;
        margin: 0px 10px;
        font-size: 0.9em;
    }
    pre {
        font-family: monospace;
        font-size: 110%;
        border:1px solid black;
        background-color: #F7F7F7;
        margin: 0px;
        padding: 10px;
        width: 800px;
        line-height: 150%;
        overflow:auto;
    }
    p.answer {
        text-indent: 20px;
        margin-bottom: 30px;
    }
    #distro-table {
        width: 100%;
    }
    #copyright {
        color: #555;
        margin: 0px 10px;
        font-size: 0.8em;
    }
  </style>
  <title>欢迎访问云服务存储平台</title>
  <link rel="shortcut icon" href="./images/favicon.ico">
  <link rel="stylesheet" href="./js/element-ui/index.css"/>
</head>


<body>
<div id="container">
  <h1 style="text-align: center;">欢迎访问云服务存储平台</h1>
  <div><h2 style="font-size:30px;font-family: 'Times New Roman', Times, serif;">Index of {{curPostion}}</h2></div>
  <div style="display:flex;margin-bottom: 7px;">
    <div style="margin-right:20px;font-size: 16px;font-weight:600">
      <a @click="backTo">../</a>
    </div>
    <div style="margin-right:20px;font-size: 16px;font-weight:600"><a @click="openModal">创建文件夹</a></div>
    <el-upload
    class="upload-demo"
    action="upload"
    :headers="uploadHeaders"
    :show-file-list="false"
    :on-success="handleUploadSuccess">
    <a style="font-size: 16px;font-weight:600">上传文件</a>
    </el-upload>
  </div>
  <table id="distro-table" cellpadding="0" cellspacing="0">
      <colgroup>
          <col width="20%"/>
          <col width="20%"/>
          <col width="20%"/>
          <col width="30"/>
          <col width="10"/>
      </colgroup>
      <thead>
          <tr><th>文件名</th><th>文件大小</th><th>上次更新时间</th><th>说明</th><th>操作</th></tr>
      </thead>
      <tbody>
          <tr class="odd" v-for="(item,index) in tableData">
              <td>
                <a v-if="item.is_dir" @click="enterSubDir(item)">{{item.filename}}/</a>
                <span v-else>{{item.filename}}</span>
              </td>
              <td>{{item.filesize}}</td>
              <td><span>{{item.upload_time}}</span></td>
              <td><span>{{item.desc}}</span></td>
              <td>
                <a style="margin-right: 20px;" @click="download_file(item)">下载</a>
                <a @click="del_file(item)">删除</a>
              </td>
          </tr>
      </tbody>
  </table>
</div>












    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="./js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="./js/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="./js/axios.min.js"></script>
    <script src="./js/request.js"></script>
    <script src="./js/api/file_list.js"></script>
    <script>
        new Vue({
            el: '#container',
            data() {
                return {
                    tableData: [],
                    counts:0,
                    curPostion:'/',
                    uploadHeaders:{
                      cur:"/",
                      user:""
                    }
                }
            },
            computed: {},
            created() {
                this.init()
            },
            methods: {
                async init() {
                  const usrname = localStorage.getItem("username")
                    this.uploadHeaders.user = usrname
                    const params = {usr: usrname,cur: this.curPostion}
                    await getFileList(params).then(res => {
                        if (String(res.code) === '200') {
                            this.tableData = res.data
                            this.counts = res.data.length
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                },
                enterSubDir(item){
                  this.curPostion = this.curPostion +item.filename+"/"
                  this.uploadHeaders.cur = this.curPostion
                  this.init()
                },

                handleUploadSuccess(res,file,fileList){
                  this.$message({
                  type:'success',
                  message:res.msg,
                  duration:2500,
                  offset:60
                })
                this.init()
                },
                //创建文件夹
                async openModal(){
                  this.$prompt('请输入文件夹名字', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputErrorMessage: '名称不能为空',
                    inputValidator:(res)=>{if(res == null || res == ""){return false}
                    const file_list = this.tableData.map(item => item.filename)
                    if(file_list.includes(res)){return "名称不能重复"}},
                    center:true
                  }).then(({ value }) => {
                    console.log(value)
                    const username = localStorage.getItem("username")
                    mkdirAtCur({usr:username,cur:this.curPostion,dir_name:value})
                    .then(res =>{
                      console.log(res)
                      if(String(res.code) === '200'){
                        this.$message({
                          type:'success',
                          message:res.msg,
                          duration:2500,
                          offset:60
                        })
                        this.init()
                      }
                    })
                  }).catch(() => {
                    this.$message({
                      type: 'info',
                      message: '取消输入'
                    })     
                  })
                },
                //回到上级目录
                backTo(){
                  console.log(this.curPostion)
                  if(this.curPostion == "/"){
                    this.$message({
                      type:'warning',
                      message:"当前是根目录,没有父级目录",
                      duration:2500,
                      offset:60
                    })                    
                  }else{
                    const tmpStr = this.curPostion.slice(0,this.curPostion.length-1)
                    const index = tmpStr.lastIndexOf('/')
                    this.curPostion = tmpStr.slice(0,index+1)
                    console.log(this.curPostion)
                    this.init()
                  }
                },
                
                download_file(item){
                  console.log(item)
                  if(item.is_dir){
                    this.$message({
                      type:'warning',
                      message:"目录不可以下载",
                      offset:60
                    })
                  }else{
                    const username = localStorage.getItem("username")
                    const file_path = this.curPostion + item.filename
                    const param = {
                      file_path,
                      usr:username
                    }
                    download_file_p(param).then(res =>{
                      downloadBlobFile(res,item.filename)
                    })

                  }
                },

                del_file(item){
                  const username = localStorage.getItem("username")
                  del_file_p({file_:this.curPostion+item.filename,usr:username})
                  .then(res => {
                    if(String(res.code) == '200'){

                    }
                    if(String(res.code) == '400'){
                      
                    }
                  })
                }
              }
        })
    </script>  
</body>
</html>